<template>
    <div class="card-list" ref="content">

        <a-list
                rowKey="id"
                :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
                :dataSource="dataSource"
        >
            <a-list-item slot="renderItem" slot-scope="item">
                <template v-if="!item || item.id === undefined">
                    <a-button class="new-btn" type="dashed" @click="createApp">
                        <a-icon type="plus"/>
                        创建 APP
                    </a-button>
                </template>
                <template v-else>
                    <a-card :hoverable="true">
                        <a-card-meta>
                            <a slot="title">{{ item.title }}</a>
                            <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
                            <div class="meta-content" slot="description">{{ item.content }}</div>
                        </a-card-meta>
                        <template class="ant-card-actions" slot="actions">
                            <a>查看</a>
                            <a>删除</a>
                        </template>
                    </a-card>
                </template>
            </a-list-item>
        </a-list>

        <a-modal title="创建应用授权" centered v-model="modal2Visible" cancelText="取消" okText="确定"
                 @ok="submitForm">
            <a-form :form="form">
                <p>创建应用</p>
                <a-form-item :label-col="{ span: 6}" :wrapper-col="{ span: 16}" label="APP名称" >
                    <a-input  v-decorator="['appname',{rules: [{ required: true, message: '请输入应用名称！' }]} ]"
                             placeholder="请输入应用名称！"/>
                </a-form-item>
                <a-form-item :label-col="{ span: 6}" :wrapper-col="{ span: 16}" label="APP描述" >
                    <a-input  v-decorator="['desc',{rules: [{ required: true, message: '请输入应用描述！' }]} ]"
                             placeholder="请输入应用描述！ "/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import {createApp, getApp ,} from "@/api/mqtt";
    const dataSource = []
    dataSource.push({})
    for (let i = 0; i < 11; i++) {
        dataSource.push({
            id: i,
            title: 'Alipay',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
        })
    }

    export default {
        name: 'CardList',
        data () {
            return {
                form: this.$form.createForm(this),

                modal2Visible: false,
                dataSource
            }
        },methods:{
            createApp(){
                this.modal2Visible = true
            },
            getApp(){
                
            },
            submitForm(){
                const { form: { validateFields },$notification } = this;
                validateFields({ force: true }, (err,values) => {
                    if (!err) {
                        const appParams = { ...values }
                        appParams.username=this.$store.getters.info.username
                        appParams.name=values.appname
                        appParams.desc=values.desc

                        createApp(appParams).then(()=> {
                            $notification['success']({
                                message: '提示',
                                description: 'app key成功，返回APP列表界面',
                                duration: 8
                            })
                            this.getApp()
                        }).catch(err => {
                            $notification['error']({
                                message: '错误',
                                description: err,
                                duration: 5
                            })
                        })
                    }
                })
                this.modal2Visible = false;
            }
        }
    }
</script>

<style lang="less" scoped>


    .card-list {
        /deep/ .ant-card-body:hover {
            .ant-card-meta-title>a {
               color: #1890ff;;
            }
        }

        /deep/ .ant-card-meta-title {
            margin-bottom: 12px;

            &>a {
                display: inline-block;
                max-width: 100%;
                color: rgba(0,0,0,.85);
            }
        }

        /deep/ .meta-content {
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            height: 64px;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            margin-bottom: 1em;
        }
    }

    .card-avatar {
        width: 48px;
        height: 48px;
        border-radius: 48px;
    }

    .ant-card-actions {
        background: #f7f9fa;

        li {
            float: left;
            text-align: center;
            margin: 12px 0;
            color: rgba(0, 0, 0, 0.45);
            width: 50%;

            &:not(:last-child) {
                border-right: 1px solid #e8e8e8;
            }

            a {
                color: rgba(0, 0, 0, .45);
                line-height: 22px;
                display: inline-block;
                width: 100%;
                &:hover {
                    color: #1890ff;
                }
            }
        }
    }

    .new-btn {
        background-color: #fff;
        border-radius: 2px;
        width: 100%;
        height: 188px;
    }

</style>
